<template>
  <div>
    <!-- 标题 -->
    <van-nav-bar
      title="编辑资料"
      left-arrow
      @click-left="onClickLeft"
    />
    <div>
      <p
        class="tishi"
        style="font-size:18px"
      ><b>修改用户名</b></p>
      <p class="tishi f_color">您当前用户名为：{{$store.state.user.user_nickname ?$store.state.user.user_nickname:$store.state.user.user_name}}</p>
    </div>
    <van-cell-group inset>
      <van-field
        v-model="nickname"
        placeholder="请输入新用户名"
      />
    </van-cell-group>
    <van-button
      type="primary"
      block
      class="btn"
      @click="set()"
    >确认修改</van-button>
  </div>
</template>

<script>
export default {
  name: "SetUser",
  data() {
    return {
      nickname: "",
    };
  },
  methods: {
    onClickLeft() {
      window.history.go(-1);
    },
    // 修改
    set() {
      this.$dialog
        .confirm({
          message: "你确定要修改用户名吗？",
        })
        .then(() => {
          this.axios
            .post("apis/kuan_api/update.php", {
              nickname: this.nickname,
              userid: this.$store.state.user.user_id,
            })
            .then((res) => {
              this.$toast.success("修改成功");
              this.nickname = "";
              this.getuser();
            })
            .catch((err) => {
              console.error(err);
            });
        })
        .catch(() => {
          // on cancel
        });
    },
    getuser() {
      this.axios
        .post("apis/kuan_api/searchUser.php", {
          userid: this.$store.state.user.user_id,
        })
        .then((res) => {
          sessionStorage.setItem("user", JSON.stringify(res.data.users[0]));
          this.$store.state.user = res.data.users[0];
        })
        .catch((err) => {
          console.error(err);
        });
    },
  },
  created() {},
};
</script>

<style scoped>
.tishi {
  text-align: center;
  margin: 10px;
}
.f_color {
  color: rgb(100, 98, 98);
}
.btn {
  width: 95%;
  margin: 10px auto;
  border-radius: 5px;
}
</style>